<template>
	<view>
		<!-- 打卡提示弹框 -->
		<uni-popup class="an-share-box" :show="show" type="center" :custom="true" :mask-click="false" @change="change" >
			<view class="uni-tip">
				<view class="uni-tip-content">
					<view class="an-bg">
						<view class="an-title">打卡成功</view>
						<view><text class="an-time">{{nowTime}}</text></view>
						<view><text class="an-addres">{{address}}</text></view>
					</view>
					<view class="an-rate">
						<uni-rate :value="signNumber" :max="3" v-if="signNumber != -1" />
						<text class="an-sing-number">今日打卡 {{signNumber}}/3</text>
					</view>
					
					<view class="uni-image-close" @click="cancel()">
						<uni-icons type="closeempty" size="30"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	import util from "@/common/util.js"
	export default {
		props:{
			signNumber:{ // 打卡次数
				type: Number,
				default: 0
			},
			address:{ // 地址
				type: String,
				default: ''
			}
		},
		components:{
			uniPopup,
			uniRate
		},
		data() {
			return {
				show: false,
				nowTime: ''
			};
		},
		methods:{
			anLoad(){
				let tim = Date.parse(new Date());
				this.nowTime = util.timeFormat(tim,"yyyy-MM-dd HH:mm");
			},
			openPopup(){
				this.anLoad()
				this.show = true
			},
			change(e) {
				//console.log(e.show)
			},
			cancel() { // 关闭弹框
				this.$emit("callBack")
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
.an-bg{
	height: 100px;
	color: #FFFFFF;
	background-color: $uni-color-success;
	border-top-right-radius: 20upx;
	border-top-left-radius: 20upx;
	.an-title{
		text-align: left;
		font-size: $uni-font-size-lg;
		padding: 20rpx;
	}
	.an-time{
		font-size: $uni-font-size-lg;
	}
	.an-addres{
		font-size: $uni-font-size-lg;
	}
}
.an-rate{
	padding: 40rpx 30rpx 30rpx 30rpx;
}
.uni-image-close{
	right: -20rpx;
	top:-20rpx;
	left: initial;
	margin-left: 0;
}
.an-sing-number{
	position: absolute;
	bottom: 12rpx;
	right: 20rpx;
}
</style>
